<script setup>
import {
    Edit,
    Delete,
    User
} from '@element-plus/icons-vue'

import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import useUserInfoStore from '@/stores/userInfo';
const userInfoStore = useUserInfoStore();
const userInfo = ref({ ...userInfoStore.info })

const activityModel = ref({
      activityName: '',
      categoryId: '',
      thing: '',
      place: '',
      userId: '',
      endTime: '',
      number: 1
    });
const rules = {
    activityName: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
    categoryId: [{ required: true, message: '请选择活动分类', trigger: 'change' }],
    thing: [{ required: true, message: '请输入活动内容', trigger: 'blur' }],
    place: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
    endTime: [{ required: true, message: '请选择截止时间', trigger: 'change' }],
    number: [{ required: true, message: '请输入上限人数', trigger: 'blur' }]
}

import { activityAddService } from '@/api/activity';
//抽屉
const visibleDrawer = ref(false)
//活动-> 添加活动
const addActivity = async () => {
    activityModel.value.userId = userInfo.value.id
    console.log(activityModel.value)
    if(activityModel.value.activityName==='' || activityModel.value.categoryId===''
        || activityModel.value.content==='' || activityModel.value.place===''
        || activityModel.value.endTime==='' 
    ){
        ElMessage.error('请完善好您的活动信息再提交！')
        return;
    }
    let result = await activityAddService(activityModel.value)
    ElMessage.success(result.msg ? result.msg : '添加成功');
    //刷新
    visibleDrawer.value = false;
    clearActivity()
    showActivityRecords()
}
//清空抽屉
const clearActivity = () =>{
    activityModel.value={
        activityName: '',
        categoryId: userInfo.value.userId,
        thing: '',
        place: '',
        userId: '',
        endTime: '',
        number: 1
    }
}

//所有分类
import { categoryListService } from '@/api/category';
const categorys = ref([])
const categoryList = async () => {
    let result = await categoryListService()
    categorys.value = result.data
}
categoryList()


//——>管理员身份 可管理分类userInfo.isAdmin===1
//弹窗
//添加分类
import { categoryAddService, categoryDelService } from '@/api/category';
const dialogVisible = ref(false)
const categoryName = ref('')
const addCategory = async () => {
    
    if (categoryName.value === '') {
        ElMessage.error('分类不能为空')
    }else {
        let result = await categoryAddService(categoryName.value)
        ElMessage.success(result.msg? result.msg:'添加分类成功')
        dialogVisible.value = false
        categoryName.value = ''
        categoryList()
    }
}
//删除分类
const delCategory = () => {
    if (categoryName.value === '') {
        ElMessage.error('活动分类不能为空')
    } else {
        ElMessageBox.confirm(
            '是否确定删除该活动分类',
            '温馨提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async() => {
                let result = await categoryDelService(categoryName.value)
                categoryList()
                dialogVisible.value = false
                categoryName.value=''
                if(result.code===0){
                    ElMessage({
                        type: 'success',
                        message: '成功删除',
                    })
                }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    }
}

//显示活动记录
import { activityDelService, overdueRecordsService, listRecordsService } from '@/api/activity';
const activityRecords = ref([]) // 活动记录
const activityOverdue = ref([]) //过期活动记录
const showActivityRecords = async() =>{
    let result = await listRecordsService()
    activityRecords.value = result.data
    let res = await overdueRecordsService()
    activityOverdue.value = res.data
}
showActivityRecords()

//删除活动
const deleteRecords = async (id) => {
    //提示，用户
    ElMessageBox.confirm(
        '是否确定删除该用户',
        '温馨提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //调用接口
            let result = await activityDelService(id);
            console.log(result.msg)
            ElMessage({
                type: 'success',
                message: '成功删除',
            })
            //更新
            showActivityRecords();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


</script>

<template>
    <el-card style="height: 80%">
        <template #header>
            <div class="header">
                <div>
                    发布活动记录
                    <el-button type="primary" style="float: right;" @click="visibleDrawer = true">发布活动</el-button>
                </div>
            </div>
        </template>
        <!-- 文章列表 -->
        <el-table :data="activityRecords" style="width: 100%">
            <el-table-column label="活动标题" width="180" prop="activityName"></el-table-column>
            <el-table-column label="活动地点" prop="place"></el-table-column>
            <el-table-column label="活动内容" prop="thing"></el-table-column>
            <el-table-column label="限制人数" prop="number"></el-table-column>
            <el-table-column label="发表时间" prop="createTime"> </el-table-column>
            <el-table-column label="截止时间" prop="endTime"> </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <!-- <el-button :icon="Edit" circle plain type="primary"></el-button> -->
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteRecords(row.id)"></el-button>
                </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 抽屉 -->
        <el-drawer v-model="visibleDrawer" title="发布活动" direction="rtl" size="50%">
            <!-- 添加文章表单 -->
            <el-form :model="activityModel" label-width="100px" :rules="rules">
                <el-form-item label="活动标题" prop="activityName">
                    <el-input v-model="activityModel.activityName" placeholder="请输入活动标题"></el-input>
                </el-form-item>
            <el-button @click="dialogVisible = true" v-show="userInfo.isAdmin === 1" style="float: right;">分类管理</el-button>
                <el-form-item label="活动分类" prop="categoryId">
                    <el-select placeholder="请选择" v-model="activityModel.categoryId">
                        <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动内容" prop="thing">
                    <el-input
                        v-model="activityModel.thing"
                        :rows="5"
                        type="textarea"
                        placeholder="请输入活动内容"
                    />
                </el-form-item>
                <el-form-item label="活动地点" prop="place">
                    <el-input v-model="activityModel.place" placeholder="请输入活动地点"></el-input>
                </el-form-item>
                <el-form-item label="截止时间" prop="endTime">
                    <el-date-picker v-model="activityModel.endTime" type="datetime" placeholder="请选择截止时间"
                        :default-time="defaultTime"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        :picker-options="{ disabledDate: (time) => time.getTime() > Date.now() }" />
                </el-form-item>
                <el-form-item label="上限人数" prop="number">
                    <el-input-number v-model="activityModel.number" :min="2" :max="200" />
                </el-form-item>
                <div class="drawer-footer">
                    <el-button type="primary" @click="visibleDrawer = false">取消</el-button>
                    <el-button type="primary" @click="addActivity">发布</el-button>
                </div>
            </el-form>
        </el-drawer>

        <!-- 添加分类弹窗 -->
        <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form label-width="100px" style="padding-right: 30px">
                <el-form-item label="分类名称">
                    <el-input v-model="categoryName"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addCategory"> 添加</el-button>
                    <el-button type="primary" @click="delCategory"> 删除</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
    <br>
    <el-card style="height: 80%;">
        <template #header>
            <div class="header">
                <div>
                    过期活动记录
                </div>
            </div>
        </template>
        <!-- 文章列表 -->
        <el-table :data="activityOverdue" style="width: 100%">
            <el-table-column label="活动标题" width="200" prop="activityName"></el-table-column>
            <el-table-column label="活动地点" prop="place"></el-table-column>
            <el-table-column label="活动内容" prop="thing"></el-table-column>
            <el-table-column label="限制人数" prop="number"></el-table-column>
            <el-table-column label="发表时间" prop="createTime"> </el-table-column>
            <el-table-column label="截止时间" prop="endTime"> </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <!-- <el-button :icon="Edit" circle plain type="primary"></el-button> -->
                    <el-button :icon="Delete" circle plain type="danger"  @click="deleteRecords(row.id)"></el-button>
                </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
    </el-card>
</template>

<style lang="scss" scoped>
.header {
    font-weight: bolder;
}

.drawer-footer {
    margin: auto;
    text-align: center;

    .el-button {
        width: 25%;
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>


